<template>
  <div class='count-up'>
    <ICountUp
      :delay="delay"
      :endVal="endVal"
      :options="options"
      :decimals="decimals"
    />
  </div>
</template>

<script>
import ICountUp from 'vue-countup-v2'

export default {
  name: 'CountUp',
  props: {
    endVal: {
      type: Number,
      default: () => 0
    },
    unit: {
      type: String,
      default: () => ''
    },
    decimals: {
      type: Number,
      default: () => 0
    },
    decimalPlaces: {
      type: Number,
      default: () => 0
    },
    useGrouping: {
      type: Boolean,
      default: () => false
    }
  },
  computed: {
    options () {
      const data = {
        useEasing: true, // // 过渡动画效果
        useGrouping: this.useGrouping, // 开启千位分隔符
        separator: ',', // 千位分隔符
        decimal: '.', // 小数点位符号
        prefix: '', // 前缀
        suffix: this.unit, // 后缀
        decimalPlaces: this.decimalPlaces // 小数点位数
      }
      return data
    }
  },
  components: {
    ICountUp
  },
  data () {
    return {
      delay: 1000
    }
  },
  created () {

  },
  mounted () {

  },
  watch: {

  },
  methods: {
    // onReady: function (instance, CountUp) {
    //   const that = this
    //   instance.update(that.endVal + 100)
    // }
  }
}
</script>

<style lang="scss" scoped>
.count-up{
  .iCountUp {
    font-size: 12em;
    margin: 0;
    color: #4d63bc;
  }
}
</style>
